<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">

      <!-- 大标题 -->
      <h1 class="contact-title">
        药用植物病害菌分离鉴定及拮抗菌株筛选
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 服务介绍内容 -->
      <div class="section">
        <div class="platform-content">
          <p class="content-paragraph">
            药用微生物资源创新与转化研究平台针对药用植物病害菌，提供病害菌分离鉴定与拮抗菌株筛选服务。基于目标病原菌（真菌或细菌），利用高通量筛选技术，从丰富菌种资源库或客户提供样本中，高效分离、筛选具有显著抑菌活性的潜在拮抗菌株。服务涵盖病原菌活化、拮抗初筛（平板对峙）、复筛（抑菌率测定）及活性菌株初步鉴定（形态/分子）。旨在为药用植物病害的绿色生物防控提供高效、安全、可持续的微生物解决方案，助力提升药材品质，减少化学农药依赖。
          </p>
        </div>
      </div>

      <!-- 筛选案例 -->
      <div class="service-section">
        <h2 class="section-title">筛选案例</h2>
        <div class="case-content">
          <p class="case-text">
            本平台从猪苓菌核中分离到21株细菌，其中编号ZL8经筛选体现出广谱抗真菌活性，其对9种植物病原真菌抑制率均>45%；盆栽试验中，ZL8使丹参（Salvia miltiorrhiza）枯萎病防效达65.71%，并显著提升其鲜重。
          </p>
          <p class="case-text">
            相关研究成果发表于：《Frontiers in Plant Science》
          </p>
          <p class="case-text">
            原文链接：<a href="http://doi.org/10.3389/fpls.2022.954160" class="case-link">http://doi.org/10.3389/fpls.2022.954160</a>
          </p>
        </div>
      </div>

      <!-- 服务流程 -->
      <div class="service-section">
        <h2 class="section-title">一、服务流程</h2>
        <div class="process-content">
          <p class="process-text">
            委托单位提交材料→委托单位邮寄材料至本平台→本平台进行检测并向委托单位发送缴费通知→本平台出具病原拮抗菌筛选报告
          </p>
        </div>
      </div>

      <!-- 服务类型 -->
      <div class="service-section">
        <h2 class="section-title">二、服务类型</h2>
        <div class="type-content">
          <p class="type-text">
            全流程筛选和单项试验。
          </p>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="service-section">
        <h2 class="section-title">三、联系方式</h2>
        <div class="contact-content">
          <p class="contact-text">联系电话：18870822971 刘老师</p>
          <p class="contact-text">邮箱：liutianrui2022@itcmhi.ac.cn</p>
        </div>
      </div>

      <!-- 邮寄地址 -->
      <div class="service-section">
        <h2 class="section-title">四、邮寄地址</h2>
        <div class="address-content">
          <p class="address-text">单位名称：中国中医科学院中医药健康产业研究所</p>
          <p class="address-text">详细地址：江西省南昌市新建区新祺周管理处中医药科创城公共服务中心3号楼</p>
          <p class="address-text">邮政编码：330115</p>
          <p class="address-text">收货人：刘天睿</p>
          <p class="address-text">手机号：18870822971</p>
        </div>
      </div>

      <!-- 汇款方式 -->
      <div class="service-section">
        <h2 class="section-title">五、汇款方式</h2>
        <div class="payment-content">
          <p class="payment-text">银行汇款</p>
          <p class="payment-text">名称：中国中医科学院中医药健康产业研究所</p>
          <p class="payment-text">银行账号：1502007809000067701</p>
          <p class="payment-text">开户银行：中国工商银行股份有限公司江西赣江新区分行</p>
          <p class="payment-text payment-note">
            汇款时请注明开发票抬头信息。请于汇款操作完成后，邮件通知本平台（附有汇款单据），以便我们确认汇款信息。
          </p>
        </div>
      </div>

    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 900px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

/* 内容区域样式 */
.platform-content {
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}

.content-paragraph {
  margin-bottom: 1.5rem;
  text-align: left;
  text-indent: 2em;
}

/* 筛选案例样式 */
.case-content {
  background-color: #f0f9ff;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
  margin-bottom: 2rem;
}

.case-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.8rem;
  text-align: left;
  font-size: 1.05rem;
}

.case-text:last-child {
  margin-bottom: 0;
}

.case-link {
  color: #1890ff;
  text-decoration: none;
  transition: color 0.3s;
}

.case-link:hover {
  color: #096dd9;
  text-decoration: underline;
}

/* 服务部分样式 */
.service-section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #13675b;
  margin-bottom: 1rem;
  text-align: start;
}

/* 流程内容样式 */
.process-content {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #13675b;
}

.process-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left;
}

/* 类型内容样式 */
.type-content {
  padding: 0 1rem;
}

.type-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left;
}

/* 联系方式样式 */
.contact-content {
  padding: 0 1rem;
}

.contact-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.contact-text:last-child {
  margin-bottom: 0;
}

/* 地址内容样式 */
.address-content {
  padding: 0 1rem;
}

.address-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.address-text:last-child {
  margin-bottom: 0;
}

/* 汇款方式样式 */
.payment-content {
  padding: 0 1rem;
}

.payment-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.payment-note {
  background-color: #fff3cd;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
  margin-top: 1rem;
  font-style: italic;
  text-align: left;
}

/* 分隔线样式 */
.custom-double-divider {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none;
  margin: 0;
  height: 1px;
}

/* 左侧 20% 的分隔线（绿色） */
.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 4px;
  background: #13675b;
}

/* 右侧 80% 的分隔线（灰色） */
.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px;
  background: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .content-paragraph,
  .case-text,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text {
    font-size: 1rem;
    text-indent: 1.5em;
  }

  .case-content {
    padding: 1rem;
  }

  .process-content {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .contact-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  .content-paragraph,
  .case-text,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text {
    font-size: 0.9rem;
    text-indent: 1em;
  }
}
</style>